<template>
  <div style="height: 100%" class="big-content-box">
    <div
      class="banner-box"
      :style="`background-image:url(${arr[imgIndex].srcStr})`"
    >
      <div @click="toggleBanner" class="show-banner"></div>
      <div class="banner">
        <div class="banner-top"></div>
        <div class="banner-bottom">
          <div class="bb-left">
            <h4>星期{{ day }}</h4>
            <p>{{ mm }}月{{ dd }}日</p>
          </div>
          <div class="bb-right">
            <button @click="showTomato"><span></span> 番茄钟</button>
          </div>
          <div class="tomato-box" v-if="hidetomato">
            <div class="tomato">
              <h3>番茄钟<button @click="showTomato">x</button></h3>
              <div class="thing">
                <img src="@/assets/images/4.png" alt="" />
                <input
                  v-model="things"
                  type="text"
                  placeholder="要做什么事情"
                  @input="len"
                />
              </div>
              <div class="time">
                <img src="@/assets/images/5.png" alt="" />
                <div class="select">
                  <h6>
                    <input
                      @input="controlTime"
                      v-model="time"
                      type="text"
                      value="10"
                    /><span>分钟</span><i @click="showTime"></i>
                  </h6>
                  <ul v-if="showtime">
                    <li @click="selectTime(10)">10</li>
                    <li @click="selectTime(15)">15</li>
                    <li @click="selectTime(20)">20</li>
                    <li @click="selectTime(25)">25</li>
                    <li @click="selectTime(30)">30</li>
                  </ul>
                </div>
              </div>
              <div class="tomato-bot">
                <button @click="totaltime">番茄统计</button>
                <button @click="startSend">开始</button>
              </div>
            </div>
            <div class="tip" v-if="showTip">
              <p>请输入要专注的事情</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="plan-list">
      <ul v-if="!isShow">
        <div class="stop-box" @touchstart="isDelete"></div>
        <li
          :class="dele == true ? 'active' : ''"
          v-for="(item, index) in planArr"
          :key="item.random"
        >
          <div class="con">
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
          </div>
          <div class="gongneng">
            <p>
              标签 <span>创建于 {{ item.yy }}.{{ item.mm }}.{{ item.dd }}</span>
            </p>
            <button @touchstart="LongStart" @touchend="LongEnd">
              ..<b v-if="dele" @click="myDelete(index)">×</b>
            </button>
          </div>
        </li>
      </ul>
      <div class="plan-mask" v-if="isShow">
        <img src="@/assets/images/person2.png" alt="" />
        <span>空空如也</span>
      </div>
    </div>

    <!-- 切换背景 -->
    <transition
      :duration="{ enter: 1000, leave: 350 }"
      enter-to-class="animate__animated animate__fadeInUp"
      enter-active-class="animate__animated animate__fadeInUp"
      leave-to-class="animate__animated animate__fadeOutDown"
      leave-active-class="animate__animated animate__fadeOutDown"
    >
      <div @touchmove.capture="myTouchMove" class="tog-bg" v-if="toggleb">
        <div class="hide-tog" @click="toggleBanner"></div>

        <div class="tog">
          <h3 :style="`opacity:${opacity}`">DIY</h3>
          <div class="tog-mask"></div>
          <ul
            :style="`margin-top:${distanceY}px`"
            @touchstart="myTouchStart"
            @touchend="myTouchEnd"
            style="margin-top: -20px"
          >
            <li v-for="(item, index) in arr" :key="index">
              <img
                @click="toggleImage(index)"
                :src="`${arr[index].srcStr}`"
                alt=""
              />
            </li>
          </ul>
        </div>
      </div>
    </transition>

    <div class="img-list" v-if="isImg">
      <ul>
        <li v-for="item ,index in imgArr" :key="item.obj.id">
          <div class="img-box">
            <img :src="item.obj.imgUrl" alt="" />
          </div>
          <p>{{ item.obj.message }} <button @click="deleteImg(index)">×</button></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: "Uptop",
  data() {
    return {
      isShow: true,
      startY: 0, // 开始值
      distanceY: 0,
      curY: 0, // 当前值
      moveY: 0,
      isMouseDown: false,
      opacity: 1,
      toggleb: false,
      showtime: false,
      arr: [
        { srcStr: require("@/assets/images/pic1.png") },
        { srcStr: require("@/assets/images/pic2.png") },
        { srcStr: require("@/assets/images/pic3.png") },
        { srcStr: require("@/assets/images/pic4.png") },
        { srcStr: require("@/assets/images/pic5.png") },
        { srcStr: require("@/assets/images/pic6.png") },
        { srcStr: require("@/assets/images/pic7.png") },
        { srcStr: require("@/assets/images/pic8.png") },
        { srcStr: require("@/assets/images/pic9.png") },
        { srcStr: require("@/assets/images/pic10.png") },
        { srcStr: require("@/assets/images/pic11.png") },
        { srcStr: require("@/assets/images/pic12.png") },
      ],
      time: 10,
      things: "",
      hidetomato: false,
      imgIndex: 2,
      planArr: [],
      showTip: false,
      dele: false,
      day: "",
      mm: "",
      dd: "",
      newArr: [],
      num: 0,
      timer: null,
      isImg: false,
      imgArr: [],
    };
  },
  methods: {
    myTouchStart(event) {
      this.startY = event.touches[0].pageY;
      this.isMouseDown = true;
      // console.log(event);
    },
    myTouchMove(event) {
      if (this.isMouseDown) {
        // console.log(event);
        this.moveY = event.touches[0].pageY;
        this.distanceY = this.moveY - this.startY + this.curY;
        this.distanceY = this.distanceY > 0 ? 0 : this.distanceY;
        this.distanceY = this.distanceY < -1000 ? -1000 : this.distanceY;
        if (this.distanceY < -40) {
          this.opacity = 0;
        } else {
          this.opacity = 1;
        }
      }
    },
    myTouchEnd() {
      this.isMouseDown = false;

      this.curY = this.distanceY;
    },
    toggleBanner() {
      this.toggleb = !this.toggleb;
    },
    showTime() {
      this.showtime = !this.showtime;
    },
    selectTime(i) {
      this.time = i;
      this.showtime = !this.showtime;
    },
    controlTime() {
      if (this.time < 0) {
        this.time = 1;
      } else if (this.time >= 120) {
        this.time = 120;
      }
    },
    showTomato() {
      this.hidetomato = !this.hidetomato;
    },
    startSend() {
      if (this.things.length == 0) {
        this.showTip = true;
        return false;
      }
      this.time = parseInt(this.time);
      this.$router.push({ path: "/tomato", query: { time: this.time * 60 } });
    },
    len() {
      if (this.things.length !== 0) {
        this.showTip = false;
      }
    },
    totaltime() {
      this.$router.push({ path: "/totaltime" });
    },
    toggleImage(i) {
      this.imgIndex = i;
    },
    myDelete(i) {
      this.planArr.splice(i, 1);
      // this.dele = false;
      if (this.planArr.length == 0 && this.imgArr.length == 0) {
        this.isShow = true;
      }
    },
    LongStart() {
      // console.log("dowm");
      this.timer = setInterval(() => {
        this.num++;
        if (this.num > 2) {
          this.dele = true;
        }
      }, 200);
    },

    isDelete() {
      clearInterval(this.timer);
      this.num = 0;
      this.dele = false;
    },
    LongEnd() {
      // this.dele = false;
      this.num = 0;
      clearInterval(this.timer);
    },
    deleteImg(i){
      this.imgArr.splice(i,1)
      if(this.imgArr.length == 0 && this.planArr.length == 0){
        this.isShow = true;
      }
    }
  },
  mounted() {
    let dt = new Date();
    this.day = dt.getDay();
    this.mm = dt.getMonth() + 1;
    this.dd = dt.getDate();
    this.mm = this.mm < 10 ? "0" + this.mm : this.mm;
    this.dd = this.dd < 10 ? "0" + this.dd : this.dd;
    if (this.day == 1) {
      this.day = "一";
    } else if (this.day == 2) {
      this.day = "二";
    } else if (this.day == 3) {
      this.day = "三";
    } else if (this.day == 4) {
      this.day = "四";
    } else if (this.day == 5) {
      this.day = "五";
    } else if (this.day == 6) {
      this.day = "六";
    } else if (this.day == 7) {
      this.day = "七";
    }

    this.planArr = Vue.prototype.plan;
    this.imgArr = Vue.prototype.imgArr;
    // if(this.planArr.length != 0 && this.imgArr.length != 0){
    //   this.isShow = false;
    // }else {
    //   this.isShow = true;
    // }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name == "Img") {
      next((vm) => {
        let obj = vm.$route.query;
        Vue.prototype.imgArr.push(obj);
        vm.imgArr = Vue.prototype.imgArr;
        vm.isImg = true;
        // vm.isShow = false;

        vm.planArr = Vue.prototype.plan;

        if (vm.planArr.length != 0 || vm.imgArr.length != 0) {
          vm.isShow = false;
        } else {
          vm.isShow = true;
        }
      });
    }
    // if (from.name != "Bianqian" || from.name == undefined) {
    //   next();
    //   return false;
    // }
    if (from.name == "Bianqian") {
      next((vm) => {
        let obj = vm.$route.query.obj;
        // if (obj.title == undefined || obj.content == undefined) {
        //   return false;
        // }
        // console.log(obj);
        // vm.planArr.unshift(obj);
        // console.log(this.plan);
        // console.log(vm.planArr);

        Vue.prototype.plan.unshift(obj);

        vm.planArr = Vue.prototype.plan;

        vm.imgArr = Vue.prototype.imgArr;
        vm.isImg = true;
        if (vm.planArr.length != 0 || vm.imgArr.length != 0) {
          vm.isShow = false;
        } else {
          vm.isShow = true;
        }
      });
    }

    next();
  },
};
</script>

<style lang="less" scoped>
.banner-box {
  width: 100%;
  height: 150px;
  background-image: url(../assets/images/pic6.png);
  background-repeat: no-repeat;
  background-size: 100% 280%;
  position: relative;
  .show-banner {
    position: absolute;
    width: 150px;
    height: 150px;
    left: 100px;
  }
  .banner {
    width: 100%;
    z-index: 1000;
  }
  .banner-top {
    width: 100%;
    height: 50px;
    position: relative;
    button {
      position: absolute;
      right: 18px;
      top: 25px;
      width: 22px;
      height: 22px;
      color: white;
      font-size: 18px;
      background-color: transparent;
    }
  }
  .banner-bottom {
    height: 100px;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px -50px 30px 0px rgba(255, 255, 255, 0.6) inset;
    .bb-left {
      h4 {
        font-size: 18px;
        margin: 5px 0;
        color: white;
      }
      p {
        font-size: 16px;
        color: white;
      }
    }
    .bb-right {
      button {
        width: 100px;
        height: 40px;
        padding-left: 28px;
        border: 1px solid #fff;
        background-color: transparent;
        border-radius: 20px;
        font-size: 16px;
        color: #fff;
        box-sizing: border-box;
        position: relative;
        span {
          display: block;
          position: absolute;
          left: 10px;
          top: 10px;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background-color: #fff;
        }
      }
    }
    .tomato-box {
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 10000;
      .tomato {
        width: 290px;
        background-color: #fff;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -145px;
        margin-top: -150px;
        padding: 15px 20px;
        box-sizing: border-box;
        h3 {
          width: 100%;
          text-align: center;
          font-size: 16px;
          position: relative;
          button {
            position: absolute;
            right: 0;
            top: -3px;
            font-size: 18px;
            padding: 5px 5px;
            background-color: transparent;
          }
        }
        img {
          width: 15px;
          vertical-align: middle;
          margin-right: 30px;
          margin-left: 10px;
          margin-top: -2px;
        }
        .thing {
          width: 100%;
          input {
            vertical-align: middle;
            font-size: 14px;
          }
        }
        .time {
          width: 100%;
          margin-bottom: 20px;
          position: relative;
          .select {
            width: 80%;
            position: absolute;
            right: 0;
            top: 15px;
            font-size: 15px;
            padding-left: 20px;
            box-sizing: border-box;
            h6 {
              width: 100%;
              height: 20px;
              font-size: 15px;
              position: relative;
              margin-bottom: 10px;
              padding-left: 5px;
              span {
                position: absolute;
                right: 50px;
                top: 0;
                font-size: 14px;
              }
              input {
                vertical-align: middle;
                font-size: 14px;
                margin-top: -5px;
              }
              i {
                display: block;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-top: 5px solid #000;
                position: absolute;
                right: 15px;
                top: 7px;
              }
            }
            ul {
              background-color: #fff;
              border-radius: 10px;
              padding-left: 5px;
              padding-bottom: 5px;
              li {
                margin-bottom: 10px;
              }
            }
          }
        }
        .tomato-bot {
          display: flex;
          justify-content: space-between;
          align-items: center;
          button {
            background-color: transparent;
            font-size: 13px;
          }
        }
      }
      .tip {
        position: absolute;
        background-color: rgba(234, 247, 52, 0.8);
        border-radius: 10px;
        font-size: 14px;
        padding: 4px 8px;
        left: 130px;
        top: 200px;
        color: #000;
        font-weight: bold;
        &::after {
          display: block;
          content: "";
          width: 0;
          height: 0;
          border: 10px solid transparent;
          position: absolute;
          border-top: 10px solid #eaf734;
          bottom: -20px;
        }
      }
    }
  }
}
.plan-list {
  width: 100%;
  box-shadow: 0px -5px 10px 10px #fff;
  background-color: #fff;
  .stop-box {
    width: 100px;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
  }
  ul {
    width: 100%;
    padding: 10px 10px 10px;
    box-sizing: border-box;
    li {
      box-sizing: border-box;
      background-color: #f8f1f1;
      border-radius: 10px;
      margin-bottom: 10px;
      &.active {
        animation: doudong 0.5s linear infinite;
      }
      .con {
        padding: 5px 10px;
        border-bottom: 1px solid #ccc;
        h4 {
          font-size: 16px;
          margin-bottom: 5px;
        }
        p {
          font-size: 14px;
          color: #424242;
        }
      }
      .gongneng {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        position: relative;
        p {
          font-size: 12px;
          color: #5c5a5a;
        }
        b {
          position: absolute;
          right: 0;
          top: -60px;
          font-size: 20px;
          background-color: red;
          width: 25px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          border-radius: 50%;
          color: white;
        }
        button {
          font-size: 20px;
          font-weight: bold;
          background-color: transparent;
          width: 40px;
          margin: 5px 0;
        }
      }
    }
  }
  .plan-mask {
    width: 100%;
    text-align: center;
    padding-top: 50px;
    box-sizing: border-box;
    position: relative;
    img {
      width: 170px;
    }
    span {
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -70px;
      color: #ccc;
      font-size: 35px;
    }
  }
}
.tog-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  .hide-tog {
    width: 100%;
    height: 120px;
  }
  .tog {
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #fff;
    position: absolute;
    top: 120px;
    left: 0;
    overflow: hidden;
    z-index: 1000;
    .tog-mask {
      width: 100%;
      height: 20px;
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
    }
    h3 {
      font-size: 20px;
      margin: 20px 20px;
    }
    ul {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      flex-wrap: wrap;
      padding-bottom: 550px;
      li {
        border-radius: 15px;
        overflow: hidden;
        margin: 0 8px;
        img {
          width: 170px;
        }
      }
    }
  }
}
.img-list {
  box-sizing: absolute;
  padding-bottom: 70px;
  ul {
    padding: 5px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      padding: 5px 0;
      margin-bottom: 10px;
      box-sizing: border-box;
      border: 1px dotted #ccc;
      border-radius: 15px;
      background-color: #f0f0f0;
      position: relative;
      img {
        width: 150px;
      }
      p {
        width: 100%;
        padding-left: 15px;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
        font-size: 20px;
        position: absolute;
        bottom: 0px;
        left: 0;
        button {
          position: absolute;
          right: 15px;
          top: 0px;
          font-size: 25px;
          background-color: transparent;
        }
      }
    }
  }
}
@keyframes doudong {
  0% {
    transform: rotateZ(1deg);
  }
  25% {
    transform: rotateZ(-1deg);
  }
  50% {
    transform: rotateZ(1deg);
  }
  75% {
    transform: rotateZ(-1deg);
  }
  100% {
    transform: rotateZ(1deg);
  }
}
</style>